<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <!-- 指定网页的兼容性模式设置,IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge, Chrome=1" />
  <title>document</title>
  <base href="https://www.google.com">
  <style>
    .btn {
      border: none;
      outline: none;
    }

    .btn:active {
      background-color: red;
    }

    p {
      width: 400px;
      margin: 0 auto;
    }

    p::first-line {
      text-transform: uppercase;
    }

    p::first-letter {
      font-size: 3em;
      border: 1px solid black;
      background: red;
      float: left;
      padding: 2px;
      margin-right: 4px;
    }
  </style>
</head>

<body>
  <!-- Define "The Internet" -->
  <p>
    <dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve
    billions of users worldwide.</p>
  <dl>
    <dt>123</dt>
    <dd nowrap="yes">asdasd</dd>
  </dl>
  <label>Choose a browser from this list:
    <input list="browsers" name="myBrowser" />
  </label>
  <datalist id="browsers">
    <option value="Chrome" />
    <option value="Firefox" />
    <option value="Internet Explorer" />
    <option value="Opera" />
    <option value="Safari" />
  </datalist>
  <details id="det">
    <summary>Some details</summary>
    <p>More info about the details.</p>
  </details>
  <details open>
    <summary>Even more details</summary>
    <p>Here are even more details about the details.</p>
  </details>
  <code><p>This is a quotation taken from the Mozilla Developer Center.</p></code>
  <a href="#">试试</a>
  <blockquote cite="http://developer.mozilla.org">
    <p>This is a quotation taken from the Mozilla Developer Center.</p>
  </blockquote>
  <button class="btn">点击</button>
  <script>
    var det = document.getElementById('det')
    console.log(getComputedStyle(det));

  </script>
</body>

</html>